<template>
  <scroll-view class="user">
    <!-- <image
      src="../../static/images/center_bg.png"
      mode="scaleToFill"
    /> -->
    <view class="main">
      <view class="top">
        <view class="t-left">
            <image
              v-if="!avatar"
              src="../../static//uploads/avatar_3.jpg"
              mode="scaleToFill"
              class="userPage"
            />
            <image
              v-else
              @click="infoBtn"
              :src="avatar"
              mode="scaleToFill"
              class="userPage"
            />
         

          <view class="t-login" v-if="!name">
            <view>
              <navigator url="/pages/login/index" open-type="navigate">
                未登录
              </navigator>
            </view>
            <view><text class="tips">点击账号登录</text></view>
          </view>
          <view class="name" v-else>{{ name }}</view>
        </view>
        <navigator
          url="/pages/my/setting"
          open-type="navigate"
          hover-class="navigator-hover"
          class="settings"
        >
          设置
        </navigator>
        <!-- <view class="settings">设置</view> -->
      </view>
      <view class="buttom">
        <view class="b-top">
          <text>我的订单</text>
          <navigator
            url="/pages/order/index?type=0"
            open-type="navigate"
            hover-class="navigator-hover"
            class="look-over"
          >
            查看全部订单 ＞
          </navigator>
          <!-- <view class="look-over">查看全部订单 ＞
          
          </view> -->
        </view>
        <view class="b-bottom">
          <navigator
            url="/pages/order/index?type=1"
            open-type="navigate"
            hover-class="navigator-hover"
          >
            <u-icon
              class="b-icon"
              color="#99ff33"
              size="24"
              name="rmb-circle"
            ></u-icon
            >待付款
          </navigator>
          <!-- <view></view> -->
          <navigator
            url="/pages/order/index?type=2"
            open-type="navigate"
            hover-class="navigator-hover"
          >
            <u-icon class="b-icon" color="#99ff33" size="24" name="car"></u-icon
            >待发货
          </navigator>
          <navigator
            url="/pages/order/index?type=3"
            open-type="navigate"
            hover-class="navigator-hover"
          >
            <u-icon
              class="b-icon"
              color="#99ff33"
              size="24"
              name="car-fill"
            ></u-icon
            >待收货
          </navigator>
          <navigator
            url="/pages/order/index?type=4"
            open-type="navigate"
            hover-class="navigator-hover"
          >
            <u-icon
              class="b-icon"
              color="#99ff33"
              size="24"
              name="edit-pen"
            ></u-icon
            >待评价
          </navigator>
          <!-- <view><u-icon class="b-icon" color="#99ff33" size="24" name="car"></u-icon>待发货</view>
          <view><u-icon class="b-icon" color="#99ff33" size="24" name="car-fill"></u-icon>待收货</view>
          <view><u-icon class="b-icon" color="#99ff33" size="24" name="edit-pen"></u-icon>待评价</view> -->
          <view
            ><u-icon
              class="b-icon"
              color="#99ff33"
              size="24"
              name="chat"
            ></u-icon
            >售后</view
          >
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      avatar: "",
      name: "",
    };
  },
  methods: {
    infoBtn() {
      uni.navigateTo({
        url: "/pages/my/profile",
      });
    },
  },
  created() {
    uni.$on("update", ({avatar,nickname}) => {
      this.avatar = avatar;
      this.name = nickname;
    });
  },
  onLoad(options) {
    console.log('修改', options)
    this.name = options.name
    this.avatar = options.avatar
  }
};
</script>

<style lang="scss">
.user {
  // height: 100%;
  height: 1200rpx;
  width: 100%;
  // background-image: url(../../static/images/center_bg.png) ;
  // background-repeat: none;
  background: url(../../static/images/center_bg.png) no-repeat fixed top;
  background-color: #f7f7f8;
  background-size: 100%;
  display: block;

  image {
    width: 100%;
  }

  .main {
    // float: none;
    padding: 0 20px;

    padding-top: 60px;
    // padding-right: 20px;

    .top {
      display: flex;
      justify-content: space-between;
      color: #f7f7f8;
      padding-bottom: 50rpx;

      .t-left {
        display: flex;

        .userPage {
          // margin-right: 20rpx;
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }

        .t-login {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 16rpx 0;
          margin-left: 20rpx;

          .tips {
            font-size: 12px;
          }
        }
        .name {
          padding-left: 20rpx;
          padding-top: 30rpx;
        }
      }

      .settings {
        margin-top: 30rpx;
        padding-right: 10px;
      }
    }

    .buttom {
      border-radius: 5px;
      height: 170rpx;
      // width: 730rpx;
      padding: 30rpx;
      background-color: #fff;

      .b-top {
        height: 40rpx;
        display: flex;
        justify-content: space-between;

        // background-color: skyblue;
        .look-over {
          color: #939393;
          font-size: 12px;
          padding-top: 5px;
        }
      }

      .b-bottom {
        margin-top: 40rpx;
        display: flex;
        justify-content: space-around;
        font-size: 24rpx;
      }
    }
  }
}
</style>